<template>
  <div class="in-out-flow-page">
    <!-- 产品信息展示（如果从产品详情进入） -->
    <el-card v-if="productInfo" class="product-info-card" shadow="never">
      <div class="product-header">
        <div class="product-title">
          <span class="product-name">{{ productInfo.productName }}</span>
          <span class="product-code">{{ productInfo.productCode }}</span>
        </div>
        <div class="product-attributes">
          <el-tag>货品类型：{{ productInfo.productTypeName || '-' }}</el-tag>
          <el-tag>规格型号：{{ productInfo.specificationModel || '-' }}</el-tag>
          <el-tag>单位：{{ productInfo.unitName || '-' }}</el-tag>
        </div>
      </div>
    </el-card>

    <!-- 顶部筛选 -->
    <el-card class="filter-card" shadow="never">
      <!-- 时间选择器 -->
      <div class="quick-tabs">
        <el-radio-group v-model="activeDateTab" size="large" @change="handleDateTabChange">
          <el-radio-button v-for="item in quickDateTabs" :key="item.value" :label="item.value">
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </div>

      <!-- 搜索表单 -->
      <el-form :model="queryForm" :inline="true" label-width="120px" class="filter-form">
        <!-- 第一行 -->
        <el-form-item label="出入库单号">
          <el-input
            v-model="queryForm.orderCode"
            placeholder="请输入出入库单号"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="出入库类型">
          <el-select
            v-model="queryForm.typeId"
            placeholder="请选择"
            clearable
            filterable
            style="width: 180px"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.typeId"
              :label="item.typeName"
              :value="item.typeId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="仓库名称">
          <el-select
            v-model="queryForm.warehouseId"
            placeholder="请选择"
            clearable
            filterable
            style="width: 180px"
          >
            <el-option
              v-for="item in warehouseOptions"
              :key="item.warehouseId"
              :label="item.warehouseName"
              :value="item.warehouseId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="经办人">
          <el-input
            v-model="queryForm.handler"
            placeholder="请输入"
            clearable
            style="width: 180px"
          >
            <template #append>
              <el-button @click="handleSelectHandler">...</el-button>
            </template>
          </el-input>
        </el-form-item>
        
        <!-- 第二行 -->
        <el-form-item label="货品">
          <el-input
            v-model="queryForm.product"
            placeholder="请输入货品名称/编号"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="货品类型">
          <el-input
            v-model="queryForm.productType"
            placeholder="请输入"
            clearable
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item label="单位">
          <el-input
            v-model="queryForm.unit"
            placeholder="请输入"
            clearable
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item label="出入库时间">
          <el-date-picker
            v-model="queryForm.flowDateRange"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            :disabled="activeDateTab !== 'custom'"
            style="width: 260px"
            @change="handleCustomDateChange"
          />
        </el-form-item>
        
        <!-- 第三行 -->
        <el-form-item label="制单人">
          <el-input
            v-model="queryForm.documentCreator"
            placeholder="请输入"
            clearable
            style="width: 200px"
          >
            <template #append>
              <el-button @click="handleSelectDocumentCreator">...</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="所在部门">
          <el-input
            v-model="queryForm.organizationName"
            placeholder="请输入"
            clearable
            style="width: 180px"
          >
            <template #append>
              <el-button @click="handleSelectOrganization">...</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="制单时间">
          <el-date-picker
            v-model="queryForm.documentCreationRange"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            style="width: 260px"
          />
        </el-form-item>
        
        <!-- 操作按钮 -->
        <el-form-item>
          <el-space>
            <el-button @click="handleReset">重置</el-button>
            <el-button type="primary" @click="handleQuery">查询</el-button>
          </el-space>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 统计卡片 -->
    <el-row :gutter="16" class="stat-row">
      <el-col :span="4">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-value" style="color: #409eff">{{ statistics.totalCount }}</div>
          <div class="stat-label">出入库单数量</div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-value" style="color: #409eff">{{ statistics.inboundCount }}</div>
          <div class="stat-label">入库单数量</div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-value" style="color: #409eff">{{ statistics.outboundCount }}</div>
          <div class="stat-label">出库单数量</div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-value inbound">{{ statistics.inboundQuantity }}</div>
          <div class="stat-label">入库数量</div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-value inbound">{{ formatAmount(statistics.inboundAmount) }}</div>
          <div class="stat-label">入库金额</div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-value outbound">{{ statistics.outboundQuantity }}</div>
          <div class="stat-label">出库数量</div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-value outbound">{{ formatAmount(statistics.outboundAmount) }}</div>
          <div class="stat-label">出库金额</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 数据表格 -->
    <el-card class="table-card" shadow="never">
      <div class="table-toolbar">
        <el-space>
          <el-button @click="handleExport">导出</el-button>
          <el-button @click="handleRefresh">刷新</el-button>
        </el-space>
      </div>

      <el-table
        v-loading="loading"
        :data="tableRows"
        border
        stripe
        style="width: 100%"
        :span-method="tableSpanMethod"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50" />
        <el-table-column type="index" label="序号" width="70">
          <template #default="{ row }">
            {{ getRowIndex(row) }}
          </template>
        </el-table-column>
        <el-table-column prop="orderCode" label="出入库单号" min-width="150">
          <template #default="{ row }">
            <el-link type="primary" @click="handleShowDetail(row)">
              {{ row.orderCode }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="flowDate" label="出入库日期" width="120">
          <template #default="scope">
            {{ formatDate(scope.row.flowDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="businessType" label="业务类型" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.businessType === '入库' ? 'success' : 'warning'">
              {{ scope.row.businessType }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="typeName" label="出入库类型" min-width="120" />
        <el-table-column prop="warehouseName" label="仓库名称" min-width="120" />
        <el-table-column label="货品名称" min-width="160" show-overflow-tooltip>
          <template #default="{ row }">
            {{ row.productName || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="货品编号" min-width="140" show-overflow-tooltip>
          <template #default="{ row }">
            {{ row.productCode || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="入库数量" width="100" align="right">
          <template #default="{ row }">
            {{ row.inboundQuantity || 0 }}
          </template>
        </el-table-column>
        <el-table-column label="出库数量" width="100" align="right">
          <template #default="{ row }">
            {{ row.outboundQuantity || 0 }}
          </template>
        </el-table-column>
        <el-table-column label="入库金额" width="120" align="right">
          <template #default="scope">
            {{ formatAmount(scope.row.inboundAmount) }}
          </template>
        </el-table-column>
        <el-table-column label="出库金额" width="120" align="right">
          <template #default="scope">
            {{ formatAmount(scope.row.outboundAmount) }}
          </template>
        </el-table-column>
        <el-table-column prop="handler" label="经办人" width="100" />
        <el-table-column prop="documentCreator" label="制单人" width="100" />
        <el-table-column prop="organizationName" label="所在部门" min-width="120" />
        <el-table-column prop="documentCreation" label="制单时间" width="120">
          <template #default="scope">
            {{ formatDate(scope.row.documentCreation) }}
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="page.pageindex"
          v-model:page-size="page.pagesize"
          :page-sizes="[10, 20, 50, 100]"
          :total="page.listCount"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import moment from 'moment'
import myaxios from '@/http/MyAxios'
import { useRoute } from 'vue-router'

type QuickDateTab = 'today' | 'yesterday' | 'thisWeek' | 'lastWeek' | 'thisMonth' | 'lastMonth' | 'custom'

interface InOutFlowProduct {
  productId: number
  productName: string
  productCode: string
  inboundQuantity: number
  outboundQuantity: number
  inboundAmount: number
  outboundAmount: number
}

interface InOutFlowRecord {
  flowId: number
  orderCode: string
  flowDate?: string
  businessType: string
  typeId: number
  typeName: string
  warehouseId: number
  warehouseName: string
  inboundQuantity: number
  outboundQuantity: number
  inboundAmount: number
  outboundAmount: number
  handler: string
  documentCreator: string
  organizationName: string
  documentCreation?: string
  productList?: InOutFlowProduct[]
}

interface InOutFlowRow extends InOutFlowRecord {
  productIndex: number
  productCount: number
  productName?: string
  productCode?: string
}

interface Statistics {
  totalCount: number
  inboundCount: number
  outboundCount: number
  inboundQuantity: number
  inboundAmount: number
  outboundQuantity: number
  outboundAmount: number
}

const route = useRoute()

// 产品信息（从路由参数获取）
const productInfo = ref<any>(null)

// 时间选择器
const quickDateTabs: Array<{ label: string; value: QuickDateTab }> = [
  { label: '今日', value: 'today' },
  { label: '昨日', value: 'yesterday' },
  { label: '本周', value: 'thisWeek' },
  { label: '上周', value: 'lastWeek' },
  { label: '本月', value: 'thisMonth' },
  { label: '上月', value: 'lastMonth' },
  { label: '自定义时间', value: 'custom' }
]

const activeDateTab = ref<QuickDateTab>('thisMonth')

// 查询表单
const queryForm = reactive({
  orderCode: '',
  warehouseId: null as number | null,
  businessType: '',
  typeId: null as number | null,
  flowDateRange: [] as string[],
  documentCreationRange: [] as string[],
  handler: '',
  product: '',
  productType: '',
  unit: '',
  documentCreator: '',
  organizationName: ''
})

// 仓库选项
const warehouseOptions = ref<Array<{ warehouseId: number; warehouseName: string }>>([])

// 类型选项（出入库类型）
const typeOptions = ref<Array<{ typeId: number; typeName: string }>>([])

// 统计数据
const statistics = reactive<Statistics>({
  totalCount: 0,
  inboundCount: 0,
  outboundCount: 0,
  inboundQuantity: 0,
  inboundAmount: 0,
  outboundQuantity: 0,
  outboundAmount: 0
})

// 表格数据
const tableData = ref<InOutFlowRecord[]>([])
const tableRows = ref<InOutFlowRow[]>([])
const loading = ref(false)
const selectedRows = ref<InOutFlowRecord[]>([])

// 需要合并的列
const spanColumns = ['orderCode', 'flowDate', 'businessType', 'typeName', 'warehouseName', 'handler', 'documentCreator', 'organizationName', 'documentCreation']

// 分页
const page = reactive({
  pageindex: 1,
  pagesize: 10,
  listCount: 0
})

// 初始化
onMounted(() => {
  // 检查是否有产品信息参数
  if (route.query.productId) {
    loadProductInfo(Number(route.query.productId))
  }
  
  loadWarehouseOptions()
  loadTypeOptions()
  applyQuickRange('thisMonth')
  fetchData()
})

// 加载产品信息
const loadProductInfo = async (productId: number) => {
  try {
    const res = await myaxios.get(`/api/Product/GetProductDetail`, {
      params: { productId }
    })
    if (res.data?.code === 200) {
      productInfo.value = res.data.data
      queryForm.orderCode = '' // 可以设置默认筛选条件
    }
  } catch (error) {
    console.error('加载产品信息失败:', error)
  }
}

// 加载仓库选项
const loadWarehouseOptions = async () => {
  try {
    const res = await myaxios.get('/api/Warehousing/GetWarehouse')
    if (res.data?.code === 200 || res.data?.success) {
      warehouseOptions.value = (res.data.data || []).map((item: any) => ({
        warehouseId: item.warehouseId,
        warehouseName: item.warehouseName
      }))
    } else {
      console.warn('获取仓库列表返回异常:', res.data)
    }
  } catch (error) {
    console.error('加载仓库选项失败:', error)
    ElMessage.warning('加载仓库列表失败，请稍后重试')
  }
}

// 加载类型选项（合并入库和出库类型）
const loadTypeOptions = async () => {
  try {
    // 加载入库类型 - 使用正确的API路径
    const inboundRes = await myaxios.get('/api/Warehousing/GetWarehousingType')
    // 加载出库类型
    const outboundRes = await myaxios.get('/api/Outbound/GetOutboundType')
    
    const types: Array<{ typeId: number; typeName: string }> = []
    
    if (inboundRes.data?.code === 200 && inboundRes.data.data) {
      inboundRes.data.data.forEach((item: any) => {
        types.push({ 
          typeId: item.warehousingTypeId || item.typeId, 
          typeName: item.warehousingName || item.typeName 
        })
      })
    }
    
    if (outboundRes.data?.code === 200 && outboundRes.data.data) {
      outboundRes.data.data.forEach((item: any) => {
        types.push({ 
          typeId: item.warehousingTypeId || item.outboundTypeId || item.typeId, 
          typeName: item.warehousingName || item.outboundTypeName || item.typeName 
        })
      })
    }
    
    typeOptions.value = types
  } catch (error) {
    console.error('加载类型选项失败:', error)
    ElMessage.warning('加载出入库类型失败，请稍后重试')
  }
}

// 获取快速日期范围
const getQuickRange = (tab: QuickDateTab): [string, string] => {
  const today = moment()
  switch (tab) {
    case 'today':
      return [today.clone().startOf('day').format('YYYY-MM-DD'), today.clone().endOf('day').format('YYYY-MM-DD')]
    case 'yesterday': {
      const y = today.clone().subtract(1, 'day')
      return [y.startOf('day').format('YYYY-MM-DD'), y.endOf('day').format('YYYY-MM-DD')]
    }
    case 'thisWeek':
      return [today.clone().startOf('week').format('YYYY-MM-DD'), today.clone().endOf('week').format('YYYY-MM-DD')]
    case 'lastWeek': {
      const last = today.clone().subtract(1, 'week')
      return [last.startOf('week').format('YYYY-MM-DD'), last.endOf('week').format('YYYY-MM-DD')]
    }
    case 'thisMonth':
      return [today.clone().startOf('month').format('YYYY-MM-DD'), today.clone().endOf('month').format('YYYY-MM-DD')]
    case 'lastMonth': {
      const lastMonth = today.clone().subtract(1, 'month')
      return [lastMonth.startOf('month').format('YYYY-MM-DD'), lastMonth.endOf('month').format('YYYY-MM-DD')]
    }
    default:
      return ['', '']
  }
}

// 应用快速日期范围
const applyQuickRange = (tab: QuickDateTab) => {
  if (tab === 'custom') {
    if (!queryForm.flowDateRange || queryForm.flowDateRange.length === 0) {
      queryForm.flowDateRange = []
    }
    return
  }
  const [start, end] = getQuickRange(tab)
  queryForm.flowDateRange = [start, end]
}

// 时间选择器变化
const handleDateTabChange = (value: QuickDateTab) => {
  activeDateTab.value = value
  applyQuickRange(value)
  if (value !== 'custom') {
    page.pageindex = 1
    fetchData()
  }
}

// 自定义日期变化
const handleCustomDateChange = () => {
  activeDateTab.value = 'custom'
}

// 查询
const handleQuery = () => {
  page.pageindex = 1
  fetchData()
}

// 重置
const handleReset = () => {
  queryForm.orderCode = ''
  queryForm.warehouseId = null
  queryForm.businessType = ''
  queryForm.typeId = null
  queryForm.flowDateRange = []
  queryForm.documentCreationRange = []
  queryForm.handler = ''
  queryForm.product = ''
  queryForm.productType = ''
  queryForm.unit = ''
  queryForm.documentCreator = ''
  queryForm.organizationName = ''
  activeDateTab.value = 'thisMonth'
  applyQuickRange('thisMonth')
  page.pageindex = 1
  fetchData()
}

// 选择经办人
const handleSelectHandler = () => {
  ElMessage.info('选择经办人功能开发中')
}

// 选择制单人
const handleSelectDocumentCreator = () => {
  ElMessage.info('选择制单人功能开发中')
}

// 选择所在部门
const handleSelectOrganization = () => {
  ElMessage.info('选择所在部门功能开发中')
}

// 构建表格行数据（展开货品明细）
const buildTableRows = () => {
  const rows: InOutFlowRow[] = []
  
  tableData.value.forEach((record) => {
    const productList = record.productList || []
    
    // 如果没有货品明细，至少显示一行
    if (productList.length === 0) {
      rows.push({
        ...record,
        productIndex: 0,
        productCount: 1,
        productName: '',
        productCode: '',
        inboundQuantity: record.inboundQuantity,
        outboundQuantity: record.outboundQuantity,
        inboundAmount: record.inboundAmount,
        outboundAmount: record.outboundAmount
      })
    } else {
      // 每个货品一行
      productList.forEach((product, index) => {
        rows.push({
          ...record,
          productIndex: index,
          productCount: productList.length,
          productName: product.productName,
          productCode: product.productCode,
          inboundQuantity: product.inboundQuantity,
          outboundQuantity: product.outboundQuantity,
          inboundAmount: product.inboundAmount,
          outboundAmount: product.outboundAmount
        })
      })
    }
  })
  
  tableRows.value = rows
}

// 合并单元格方法
const tableSpanMethod = ({ row, column }: { row: InOutFlowRow; column: any }) => {
  // 序号列特殊处理
  if (column.label === '序号') {
    if (row.productIndex === 0) {
      return { rowspan: row.productCount, colspan: 1 }
    }
    return { rowspan: 0, colspan: 0 }
  }
  
  // 需要合并的列
  if (spanColumns.includes(column.property)) {
    if (row.productIndex === 0) {
      return { rowspan: row.productCount, colspan: 1 }
    }
    return { rowspan: 0, colspan: 0 }
  }
  
  return { rowspan: 1, colspan: 1 }
}

// 获取行序号
const getRowIndex = (row: InOutFlowRow) => {
  // 只显示第一行的序号
  if (row.productIndex === 0) {
    const index = tableRows.value.findIndex(r => 
      r.flowId === row.flowId && r.productIndex === 0
    )
    return (page.pageindex - 1) * page.pagesize + index + 1
  }
  return ''
}

// 显示详情
const handleShowDetail = (row: InOutFlowRow) => {
  if (row.businessType === '入库') {
    // 跳转到入库详情
    window.open(`/DetailWarehousing?warehousingId=${row.flowId}`, '_blank')
  } else {
    // 跳转到出库详情
    window.open(`/DetailOutbound?outboundId=${row.flowId}`, '_blank')
  }
}

// 获取数据
const fetchData = async () => {
  loading.value = true
  try {
    const params: any = {
      orderCode: queryForm.orderCode || undefined,
      warehouseId: queryForm.warehouseId || undefined,
      businessType: queryForm.businessType || undefined,
      typeId: queryForm.typeId || undefined,
      flowDateStart: queryForm.flowDateRange?.[0] || undefined,
      flowDateEnd: queryForm.flowDateRange?.[1] || undefined,
      documentCreationStart: queryForm.documentCreationRange?.[0] || undefined,
      documentCreationEnd: queryForm.documentCreationRange?.[1] || undefined,
      productId: productInfo.value?.productId || undefined,
      handler: queryForm.handler || undefined,
      product: queryForm.product || undefined,
      pageindex: page.pageindex,
      pagesize: page.pagesize
    }

    // 移除空值
    Object.keys(params).forEach(key => {
      if (params[key] === undefined || params[key] === null || params[key] === '') {
        delete params[key]
      }
    })

    const [listRes, statsRes] = await Promise.all([
      myaxios.get('/api/InOutFlow/GetInOutFlowList', { params }),
      myaxios.get('/api/InOutFlow/GetInOutFlowStatistics', { params: { ...params, pageindex: undefined, pagesize: undefined } })
    ])

    if (listRes.data?.code === 200) {
      const rawData = listRes.data.data?.data || []
      
      // 直接使用后端返回的数据，确保字段名匹配
      tableData.value = rawData
      
      page.listCount = listRes.data.data?.listCount || 0
      
      
      // 展开数据为每个货品一行
      buildTableRows()
    }

    if (statsRes.data?.code === 200) {
      const statsData = statsRes.data.data || {}
      // 计算出入库单数量
      const inboundList = tableData.value.filter(item => item.businessType === '入库')
      const outboundList = tableData.value.filter(item => item.businessType === '出库')
      
      statistics.totalCount = tableData.value.length
      statistics.inboundCount = inboundList.length
      statistics.outboundCount = outboundList.length
      statistics.inboundQuantity = statsData.inboundQuantity || 0
      statistics.inboundAmount = statsData.inboundAmount || 0
      statistics.outboundQuantity = statsData.outboundQuantity || 0
      statistics.outboundAmount = statsData.outboundAmount || 0
    }
  } catch (error) {
    console.error('获取数据失败:', error)
    ElMessage.error('获取数据失败')
  } finally {
    loading.value = false
  }
}

// 刷新
const handleRefresh = () => {
  fetchData()
}

// 导出
const handleExport = () => {
  ElMessage.info('导出功能开发中')
}

// 选择变化
const handleSelectionChange = (selection: InOutFlowRecord[]) => {
  selectedRows.value = selection
}

// 分页变化
const handleSizeChange = (size: number) => {
  page.pagesize = size
  page.pageindex = 1
  fetchData()
}

const handleCurrentChange = (index: number) => {
  page.pageindex = index
  fetchData()
}

// 格式化日期
const formatDate = (date?: string | Date) => {
  if (!date) return '-'
  return moment(date).format('YYYY-MM-DD')
}

// 格式化金额
const formatAmount = (amount: number) => {
  if (!amount) return '0.00'
  return Number(amount).toFixed(2)
}
</script>

<style scoped>
.in-out-flow-page {
  padding: 20px;
}

.product-info-card {
  margin-bottom: 20px;
}

.product-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.product-name {
  font-size: 18px;
  font-weight: bold;
}

.product-code {
  font-size: 14px;
  color: #909399;
}

.product-attributes {
  display: flex;
  gap: 8px;
}

.filter-card {
  margin-bottom: 20px;
}

.quick-tabs {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
}

.filter-form {
  margin-top: 20px;
}

.stat-row {
  margin-bottom: 20px;
}

.stat-card {
  text-align: center;
  padding: 20px;
}

.stat-value {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 8px;
}

.stat-value.inbound {
  color: #409eff;
}

.stat-value.outbound {
  color: #e6a23c;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.table-card .table-toolbar {
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>

